<template>
  <div class="maintenance-list">
    <el-form inline>
      <el-form-item label="申报日期区间">
        <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="fetchData"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="maintenanceData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="date" label="申报日期"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { ElTable, ElTableColumn, ElForm, ElFormItem, ElDatePicker, ElButton, ElInput } from 'element-plus';

const maintenanceData = ref([]);
const dateRange = ref([]);

const fetchData = () => {
  // 调用API获取数据
  console.log('查询条件:', { dateRange: dateRange.value });
  // 模拟数据
  maintenanceData.value = [
    { name: '张三', date: '2023-05-01', status: '已完成' },
    { name: '李四', date: '2023-05-02', status: '进行中' },
  ];
};
</script>

<style scoped>
.maintenance-list {
  padding: 20px;
}
</style>